<template>
    <div class="switchcraft" :class="{cue: isOpen}" @click="$emit('update:isOpen', !isOpen)"></div>
</template>

<script>
    export default {
        name: 'switchcraft',
        props: {
            isOpen: {type: Boolean, requierd: true},
        },
    }
</script>

<style lang="scss">
    .switchcraft{display: inline-block;width: 72px;height: 32px;background: #999;position: relative;border-radius: 16px;cursor: pointer;transition: background-color 0.35s;}
    .switchcraft:after{content: '';position: absolute;top: 4px;left: 4px;width: 24px;height: 24px;background: #fff;border-radius: 50%;transition: left 0.35s;}
    .switchcraft.cue{background: #47bac1;}
    .switchcraft.cue:after{left: 44px;}
</style>
